<template>
<div class="container">
  <div class="item-title">
    <button @click="handleTitleClick" class="item">

      {{ project['name'] }}<i class="icon-title el-icon-arrow-down"></i>
    </button>
  </div>
  <div class="content">
  <button @click="handleItemClick(item, index)"
          v-for="(item, index) in menus"
          :key="index"
          :class="{item: true,active: currentMenu === index}">
    <span><i :class="item.icon" class="icon"></i></span><span>{{item.name}}</span></button>
  </div>
</div>
</template>

<script>
export default {
  name: 'Sider',
  props: ['project'],
  data () {
    return {
      menus: [
        {
          icon: 'el-icon-coin',
          path: '/database/list',
          name: '数据库设置'
        },
        {
          icon: 'el-icon-pie-chart',
          path: '/menu/list',
          name: '菜单设置'
        },
        {
          icon: 'el-icon-view',
          path: '/init/list',
          name: '项目初始化'
        }
      ],
      currentMenu: null
    }
  },
  methods: {
    handleItemClick (item, index) {
      this.currentMenu = index
      this.$router.push(item.path)
      this.$emit('handleMenuName', item.name)
    },
    handleTitleClick () {
      this.$router.push('/item')
    }
  },
  created () {
  }
}
</script>

<style scoped lang="less">
  .container {
    button {
      cursor: pointer;
    }
    .icon-title {
      margin-left: 5px;
    }
    .content {
      padding: 8px 0;

    }
    .item-title {
      height: 64px;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      align-items: center;
      .item {
        width: 100%;
        height: 32px;
        display: inline-block;
        border-radius: 30px;
        text-align: center;
        font: 14px/32px Roboto, Avenir;
        color: rgb(44, 62, 80);
        background-color: rgb(228, 245, 239);

      }

    }
    button.item {
      display: flex;
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      padding: 0 16px;
      font: 16px Roboto, Avenir, Helvetica, Arial, sans-serif;
      align-items: center;
      background-color: transparent;
    }
    button.item:focus {
      border: none;
      outline: none;
    }
    .icon {
      font-size: 24px;
      margin-right: 6px;
    }
    button.active {
      outline: none;
      color: rgb(66, 185, 131);
      background-color: rgba(66, 185, 131, 0.05);
    }

  }

</style>
